<template>
	<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		@scroll="scroll">
		<view class="container">
			<view class="lunbotu">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="t in imgArr">
						<image :src="t" mode="" class="IMM"></image>
					</swiper-item>

				</swiper>
			</view>
			<view class="xiangqing">
				<view class="xiangqingzuo">
					<view class="zuoshang">
						{{xiangqingData.prodName}}
					</view>
					<view class="zuozhong">
						{{xiangqingData.brief}}
					</view>
					<view class="jiage">
						￥{{xiangqingData.price}}
					</view>
				</view>
				<view class="xiangqingyou">
					<image src="../../../static/img/shoucang.png" mode="" v-if="panduan" @click="isshoucang"></image>
					<image src="/static/img/shoucang1.png" mode="" v-else='panduan' @click="isshoucang"></image>
					收藏
				</view>
			</view>
			<van-divider hairline customStyle="border:12px solid #eee" />

			<view class="guige" @click="showDialog">


				<view class="guigezuo">
					已选
					<view class="xuanxiang">
						{{xianshivalue1}} {{xianshivalue2}} {{xianshivalue3}}
					</view>

				</view>

				<view class="guigeyou">
					...
				</view>
			</view>
			<van-divider hairline customStyle="border:12px solid #eee" />
			<view class="pingjia">
				<van-cell is-link value="共0条">
					<template #title>
						<view class="pingjiatitle">
							评价：好评{{pingjia.positiveRating}} %
						</view>
					</template>
				</van-cell>
				<view class="Cell">
					<view class="cellitem">
						<van-tag type="warning" size="large">全部({{pingjia.number}})</van-tag>
					</view>
					<view class="cellitem">
						<van-tag type="warning" size="large">好评({{pingjia.praiseNumber}})</van-tag>
					</view>
					<view class="cellitem">
						<van-tag type="warning" size="large">中评({{pingjia.secondaryNumber}})</van-tag>
					</view>
					<view class="cellitem">
						<van-tag type="warning" size="large">差评({{pingjia.negativeNumber}})</van-tag>
					</view>
					<view class="cellitem">
						<van-tag type="warning" size="large">有图({{pingjia.picNumber}})</van-tag>
					</view>
				</view>

			</view>
			<view v-html="formatHtml(xiangqingData.content)" class="tupian">
			</view>
			<view class="bidu">
				<van-goods-action>
					<van-goods-action-icon icon="cart-o" text="购物车" @click="tiaozhuanGWC" />
					<van-goods-action-icon icon="shop-o" text="店铺" />
					<van-goods-action-button @click="goumai" text="立即购买" />
				</van-goods-action>
			</view>


			<van-action-sheet class="choice" :show="show" @close="tuichutanchuang" title="选择产品类别">
				<view class="leibieitem" v-for="(item,index) in tagList" v-if="tagList[0].label !=''">
					<view class="leibie">
						{{item.label}}
					</view>
					<view class="juti">
						<view class="jutiitem" v-for="(item1,index1) in item.option"
							:class="{active:selectTag[item.label]==item1}"
							@click="gaoliangXianShi(item.label,item1,index)">
							{{item1}}
						</view>
					</view>

				</view>
				<view class="btn">
					<van-button type="danger" style="width: 100%; " @click="tuichutanchuang" block
						:disabled="tagList[0].label !=''?false:true">确定</van-button>
				</view>
			</van-action-sheet>









			<van-action-sheet class="goumaitanchuang" @close="tuichugoumai" :show="goumaipanduan">
				<view class="shangpin">
					<view class="shangpintop">
						<view class="shangpinimg">
							<image :src="imgArr[INDEX]" mode=""></image>
						</view>
						<view class="shangpinxinxi">
							<view class="shangpinxinxileft">
								<view class="shangpinxinxilefttop">

									<view class="topzi">
										{{xianshivalue1}} {{xianshivalue2}} {{xianshivalue3}}
									</view>
									<view class="bottomzi">
										{{xiangqingData.brief}}
									</view>
								</view>
								<view class="shangpinxinxileftbottom">
									￥{{xiangqingData.price}}
								</view>
							</view>
							<view class="shangpinxinxiright">
								x{{confirm.orderItem.prodCount}}
							</view>
						</view>
					</view>
					<view class="shangpinbottom">
						<van-stepper :value="confirm.orderItem.prodCount" @change="onChange" />
					</view>
				</view>
				<view class="leibieitem" v-for="(item,index) in tagList" v-if="tagList[0].label !=''">
					<view class="leibie">
						{{item.label}}
					</view>
					<view class="juti">
						<view class="jutiitem" v-for="(item1,index1) in item.option"
							:class="{active:selectTag[item.label]==item1}"
							@click="gaoliangXianShi(item.label,item1,index,index1)">
							{{item1}}
						</view>
					</view>

				</view>
				<view class="btn">
					<van-button type="danger" color="#808080" class="zuo" style="width: 50%;" block
						@click="jiaruGWC">加入购物车</van-button>
					<van-button type="danger" class="you" style="width: 50%;" block
						@click="tuichugoumai">立即购买</van-button>
				</view>
			</van-action-sheet>
		</view>
	</scroll-view>





</template>

<script>
	import {
		getxiangqing,
		getPingJia,
		getshuliang,
		getShoucang,
		getGouWuche
	} from "../../../api/xiangqing.js"
	import {
		formatHtml
	} from "@/utils/util.js"
	import {
		jiesuan
	} from "../../../api/goumai.js"
	import {
		getDizhi
	} from "../../../utils/goumai.js"
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				panduan: true,
				id: '',
				xiangqingData: {},
				imgArr: [],
				pingjia: {},
				show: false,
				typeList: [],
				tagList: [],
				selectTag: {},
				xianshivalue1: '',
				xianshivalue2: '',
				xianshivalue3: '',
				goumaipanduan: false,
				INDEX: 0,
				xiangqingdataitem: {},
				confirm: {
					basketIds: [
						0
					],
					orderItem: {
						prodId: 0,
						skuId: 0,
						prodCount: 1,
						shopId: 0,
						distributionCardNo: ""
					},
					addrId: 0,
					userChangeCoupon: 0,
					couponIds: [
						0
					]
				},
				shopList: {
					basketId: 0,
					prodId: 0,
					skuId: 0,
					shopId: 0,
					count: 0,
					distributionCardNo: ""
				}
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getXiangQing()
			this.getPingjia()
			// this.morenguoge()this.GETshuliang()
			this.GETshoucang()
		},
		onShow() {

			this.GETDIZHI()

		},
		methods: {
			isshoucang() {
				this.panduan = !this.panduan
			},
			async getXiangQing() {
				let result = await getxiangqing({
					prodId: this.id
				})
				var popObject = {}
				var defaultArr = []
				console.log(result, "result")
				this.xiangqingData = result.data.data
				this.imgArr = this.xiangqingData.imgs.split(',')

				for (var i = 0; i < this.xiangqingData.skuList.length; i++) {
					this.typeList.push(this.xiangqingData.skuList[i].properties)
				}
				// console.log("typelsi",this.typeList)
				for (var i = 0; i < this.typeList.length; i++) {
					var popStr = this.typeList[i].split(";")
					if (defaultArr.length == 0) {
						defaultArr = popStr
					}
					for (var j = 0; j < popStr.length; j++) {
						var valueArr = popStr[j]
						var valueStr = valueArr.split(":")
						if (!popObject[valueStr[0]]) {
							popObject[valueStr[0]] = new Set()
						}
						popObject[valueStr[0]].add(valueStr[1])
						this.tagList = Object.entries(popObject).map(([key, value]) => {
							return {
								label: key,
								option: Array.from(value).map(item => {
									return item
								})
							}
						})
					}
				}
				// console.log("taglist", this.tagList)
				// console.log("selectkaishi", this.selectTag)
				for (let x = defaultArr.length - 1; x >= 0; x--) {
					let newStr = defaultArr[x]
					let newArr = newStr.split(":")
					this.$set(this.selectTag, newArr[0], newArr[1])
				}
				console.log(this.xiangqingData, "this.xiangqingData")

			},
			async getPingjia() {
				let result = await getPingJia({
					prodId: this.id
				})
				this.pingjia = result.data.data
				// console.log(this.pingjia,"pingjia")
			},
			async GETDIZHI() {
				let result = await getDizhi()
				this.dizhiArr = result.data.data
				console.log(this.dizhiArr, "dizhiarr")
				this.GETjiesuan()
			},
			formatHtml(t) {
				return formatHtml(t)
			},
			showDialog() {
				this.show = true
			},
			gaoliangXianShi(popTitle, popValue, index, indexheng) {
				this.$set(this.selectTag, popTitle, popValue)
				// console.log("select",this.selectTag)
				// console.log("index",index)
				if (index == 0) {
					this.xianshivalue1 = popValue
				}
				if (index == 1) {
					this.xianshivalue2 = popValue
				}
				if (index == 2) {
					this.xianshivalue3 = popValue
				}
				this.INDEX = indexheng
			},
			tuichutanchuang() {
				this.show = false
				// this.$set(this.xianshi,this.xianshivalue)

			},
			goumai() {
				this.goumaipanduan = true
			},
			tuichugoumai() {
				this.goumaipanduan = false
				uni.navigateTo({
					url: `/pages/goumai/goumai/goumai?brief=${this.xiangqingData.brief}&prodId=${this.shopList.prodId}&skuId=${this.shopList.skuId}&prodCount=${this.shopList.count}&shopId=${this.xiangqingData.shopId}&price=${this.xiangqingData.price}&xianshivalue1=${this.xianshivalue1}&xianshivalue2=${this.xianshivalue2}&xianshivalue3=${this.xianshivalue3}&imgarr=${this.imgArr[this.INDEX]}&confirms=`+encodeURIComponent(JSON.stringify(this.confirm))
				})
			},
			onChange(event) {
				this.confirm.orderItem.prodCount = event.detail
			},
			tiaozhuanGWC() {
				uni.switchTab({
					url: "/pages/gouwuche/gouwuche/gouwuche"
				})
			},
			async GETshoucang() {
				let result = await getShoucang({
					prodId: this.id
				})
				this.panduan = result.data.data

			},
			
			jiaruGWC() {
				this.xiangqingdataitem = this.xiangqingData.skuList[this.INDEX]
				// console.log(this.xiangqingdataitem,"this.xiangqingdataitem")
				this.shopList.basketId = 0
				this.shopList.prodId = this.id
				this.shopList.skuId = this.xiangqingdataitem.skuId
				this.shopList.shopId = this.xiangqingData.shopId
				this.shopList.count = this.confirm.orderItem.prodCount
				
				this.confirm.orderItem.prodId=this.id
				this.confirm.orderItem.skuId=this.xiangqingdataitem.skuId
				this.confirm.orderItem.shopId=this.xiangqingData.shopId
				this.confirm.addrId=this.dizhiArr[0].addrId
				
				getGouWuche(this.shopList).then((res) => {
					console.log("成功", res)
					uni.showToast({
						title: "添加成功",
						icon: "success",
						duration: 2000
					})
				})
				this.goumaipanduan = false
				console.log("result", result)
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.lunbotu {
			height: 700rpx;

			.swiper {
				height: 700rpx;
			}
		}

		.xiangqing {
			display: flex;
			margin-top: 50rpx;

			.xiangqingzuo {

				width: 70%;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.jiage {
					color: red;
				}

				.zuoshang {
					font-size: 40rpx;
					font-weight: 700;
				}

				.zuozhong {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
				}
			}

			.xiangqingyou {
				width: 30%;
				text-align: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.IMM {
			width: 100%;
			height: 700rpx;
		}

		.guige {

			display: flex;

			.guigezuo {
				.xuanxiang {
					font-size: 50rpx;
					margin-left: 10rpx;
					font-weight: 700;
				}

				display: flex;
				align-items: center;
				width: 90%;
				margin-left: 20rpx;
			}

			.guigeyou {
				width: 10%;
				display: flex;
				align-items: center;
			}
		}

		.pingjia {
			margin-top: 50rpx;

			.Cell {
				display: flex;
				margin-top: 50rpx;

				.cellitem {
					width: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

		}

		.tupian {
			width: 100%;
			margin-top: 100rpx;
		}

		.choice,
		.goumaitanchuang {
			display: flex;
			flex-direction: column;

			.leibieitem {
				display: flex;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.leibie {
					width: 20%;
					display: flex;
					justify-content: center;

				}

				.juti {
					width: 80%;
					display: flex;
					margin-right: 20rpx;
					justify-content: center;

					.jutiitem {
						color: red;
						border: 2px red solid;
						margin-right: 20rpx;
						font-weight: 600;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;
						padding: 10rpx;

						&.active {
							color: white;
							background-color: red;
						}
					}
				}
			}


		}

		.goumaitanchuang {
			.shangpin {
				display: flex;
				flex-direction: column;
				margin-top: 50rpx;

				.shangpintop {
					display: flex;

					.shangpinimg {
						width: 35%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 200rpx;
							height: 200rpx;


						}
					}

					.shangpinxinxi {
						width: 65%;

						display: flex;

						.shangpinxinxileft {
							width: 75%;

							display: flex;
							flex-direction: column;

							.shangpinxinxilefttop {
								height: 80%;

								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;

								.topzi {
									font-weight: 700;
								}

								.bottomzi {
									font-size: 30rpx;
								}
							}

							.shangpinxinxileftbottom {
								height: 25%;

								text-align: center;
							}
						}

						.shangpinxinxiright {
							width: 20%;
							padding-top: 150rpx;
							text-align: center;
						}
					}
				}

				.shangpinbottom {
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					height: 100rpx;
					padding-left: 500rpx;
				}
			}

			.btn {
				display: flex;
				padding: 10rpx;

				.zuo {
					width: 50%;
					display: flex;
					justify-content: center;
				}

				.you {
					width: 50%;
					display: flex;
					justify-content: center;
				}
			}
		}


	}
</style>